.snow-container {
    overflow: hidden;
    width: 100%;
    background-color: red;
    max-width: 100%;
    height: 100%;
    pointer-events: none; /*阻止任何事件*/
}

.deng-box {
    position: fixed;
    top: -40px;
    right: 150px;
    z-index: 9999;
    pointer-events: none;
}


.snow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /*垂直、水平居中*/
    margin: auto;
    transform: translate(0, -100%);
    animation: snowing infinite linear;
    pointer-events: none;
}

.foreground {
    animation-duration: 25s;
    background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png');
}

.foreground.layer {
    animation-delay: 12.5s; /*推迟时间是总时间/2*/

}

.medium {
    animation-duration: 35s;
    background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
}

.medium.layer {
    animation-delay: 17.5s;
}

.background {
    animation-duration: 45s;
    background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png');

}

.background.layer {
    animation-delay: 22.5s;
}

@keyframes snowing {
    100% {
        transform: translate(15%, 100%);
    }
}